<template>
  <div class="container">
    <el-row :gutter="20" style="height: 100%">
      <el-col :span="4" class="col-class">
        <div class="choose-bank">
          <el-card class="bank-card" v-for="item in bankList" :key="item.id" @click="initBankQuestion(item.id)">
            <div class="bank-card-content">
              <div class="bank-card-desc" style="font-size: 14px">
                <el-tag :type="scopeList[item.publicScope].type" size="default" style="margin-right: 10px">
                  {{ scopeList[item.publicScope].name }}
                </el-tag>
                <div><span style="font-weight: 800">题库名：</span>{{ item.bankName }}</div>
                <div><span style="font-weight: 800">题库描述：</span>{{ item.description }}</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="20" class="col-class">
        <div class="choose-question-list">
          <el-row class="score-content">
            <el-col :span="24" class="score-col">
              <div class="score-box">
                <el-card
                    class="score-item"
                    v-for="(item, index) in scoreList"
                    :key="index"
                >
                  <div class="label">{{ item.label }}</div>
                  <div class="score">
                    <span class="current-score">{{ getList(item.key).value.length }}</span>
                    <span class="separator">/</span>
                    <span class="total-score">{{ item.num }}</span>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
          <el-row class="question-option">
            <el-col :span="24" class="score-col">
              <div class="question-option-left "  style="overflow: auto">
                <el-card  v-infinite-scroll="loadMore" v-for="item in bankQuestionList" class="bank-question-card">
                  <div class="bank-question__id">
                    <div class="bank-question__id__item">
                      <span><svg-icon style="font-size: 16px;" icon-class="num"/></span>&nbsp;&nbsp;&nbsp;
                      <span>{{ item.id }}</span>
                    </div>
                    <div class="bank-question__id__item">题目类型：{{ getQuestionType(item.questionType) }}</div>
                  </div>
                  <div>
                    <div class="question-titles">题目：</div>
                    <div v-html="item.content"></div>
                    <div v-if="item.options&&item.options.length>0">
                      <div class="question-titles">选项：</div>
                      <div v-for="item in item.options" style="display: flex;flex-direction: row;width: 100%">
                        <div>{{ item.key }}.</div>
                        <div v-html="item.value"></div>
                      </div>
                    </div>
                    <div class="question-titles">题目解析：</div>
                    <div v-html="item.explanation"></div>
                    <div class="question-titles">答案：</div>
                    <div v-html="item.answer"></div>
                  </div>
                  <div class="operator" style="float: right;margin: 10px">
                    <el-button link @click="addQuestionInExam(item)">
                      <template #default>
                        <el-icon>
                          <EditPen/>
                        </el-icon>
                        <span>加入试卷</span>
                      </template>
                    </el-button>
                  </div>
                </el-card>
              </div>
              <div class="question-option-right">
                <el-card v-for="item in allQuestions()" class="bank-question-card">
                  <div class="bank-question__id">
                    <div class="bank-question__id__item">
                      <span><svg-icon style="font-size: 16px;" icon-class="num"/></span>&nbsp;&nbsp;&nbsp;
                      <span>{{ item.questionId }}</span>
                    </div>
                    <div class="bank-question__id__item">题目类型：{{ getQuestionType(item.questionType) }}</div>
                  </div>
                  <div>
                    <div class="question-titles">题目：</div>
                    <div v-html="item.content"></div>
                    <div v-if="item.options&&item.options.length>0">
                      <div class="question-titles">选项：</div>
                      <div v-for="item in item.options" style="display: flex;flex-direction: row;width: 100%">
                        <div>{{ item.key }}.</div>
                        <div v-html="item.value"></div>
                      </div>
                    </div>
                    <div class="question-titles">题目解析：</div>
                    <div v-html="item.explanation"></div>
                    <div class="question-titles">答案：</div>
                    <div v-html="item.answer"></div>
                  </div>
                  <div class="operator" style="float: right;margin: 10px">
                    <el-button link @click="removeExamQuestion(item)">
                      <template #default>
                        <el-icon>
                          <Delete/>
                        </el-icon>
                        <span>移除试题</span>
                      </template>
                    </el-button>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getShareList} from "@/api/question/bank.js";
import {onMounted, ref, toRefs} from "vue";
import {getBankQuestionPage} from "@/api/question/question.js";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {addQuestionToExam, getExamBaseInfo, getExamQuestion, removeExamQuestionApi} from "@/api/question/exam.js";
import {Delete} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";

const scopeList = ref([
  {type: 'primary', name: '未公开'},
  {type: 'warning', name: '本校公开'},
  {type: 'success', name: '完全公开'},
])
const questionType = ref([
  {key: 'single', value: '单选题'},
  {key: 'multiple', value: '多选题'},
  {key: 'judgment', value: '判断题'},
  {key: 'fill', value: '填空题'},
  {key: 'essay', value: '简答题'},
])
const singleList = ref([])
const multipleList = ref([])
const judgmentList = ref([])
const fillList = ref([])
const essayList = ref([])
const getQuestionType = (type) => {
  //根据key查找值
  return questionType.value.find(item => item.key === type).value
}
const bankQuestionPage = ref(0)
const bankQuestionSize = ref(10)
const bankId = ref(0)
const bankList = ref([])
const bankQuestionList = ref([])
const pages = ref(0)
const scoreList = ref([])

const props = defineProps({
  //子组件接收父组件传递过来的值
  examId: 0,
})

const {examId} =toRefs(props)
const allQuestions=()=> {
  // 将所有类型的题目合并到一个数组中
  return [
    ...singleList.value,
    ...multipleList.value,
    ...judgmentList.value,
    ...fillList.value,
    ...essayList.value,
  ];
}
onMounted(() => {
  initBankList()
  initExamBaseInfo()
  initExamQuestion(examId.value)
})
const initBankList = async () => {
  const res = await getShareList();
  bankList.value = res.data
}
//查询考试基本信息
const initExamBaseInfo = async () => {
  const res = await getExamBaseInfo(examId.value);
  scoreList.value = res.data.examScore
}
const initBankQuestion = async (id) => {
  bankId.value = id
  bankQuestionPage.value = 1
  bankQuestionList.value = []
  const data = {
    page: 1,
    pageSize: bankQuestionSize.value
  }
  const res = await getBankQuestionPage(id, data)
  bankQuestionList.value = res.data.records
  pages.value = res.data.pages
}
const loadMore = async () => {
  if (bankQuestionPage.value < pages.value) {
    bankQuestionPage.value += 1
    const data = {
      page: bankQuestionPage.value,
      pageSize: bankQuestionSize.value
    }
    const res = await getBankQuestionPage(bankId.value, data)
    bankQuestionList.value.push(...res.data.records)
  }
}
const addQuestionInExam = async (question) => {
  //判断是否超了
  const type = question.questionType
  //筛选出分数的num
  const score = scoreList.value.find(item => item.key === type)
  const num = score.num
  if (getList(type).value.length >= num) {
    ElMessage({
      message: '该题型已达到上限',
      type: 'warning'
    })
  } else {
    //检查题目是否已经有了
    const isExist = getList(type).value.some(item => item.questionId === question.id)
    if (isExist) {
      ElMessage({
        message: '该题目已存在',
        type: 'warning'
      })
    } else {
      question.examId = examId.value
      question.questionId=question.id
      question.score=score.score
      try {
        const res = await addQuestionToExam(question)
        //添加数据
        getList(type).value.push(res.data)
        ElMessage({
          message: '试题添加成功',
          type: 'success'
        })
      }catch (error) {

      }
    }
  }

}
const getList = (type) => {
  switch (type) {
    case 'single':
      return singleList
    case 'multiple':
      return multipleList
    case 'judgment':
      return judgmentList
    case 'fill':
      return fillList
    case 'essay':
      return essayList
  }
}
const initExamQuestion = async (id) => {
  const res = await getExamQuestion(id)
  //根据key将结果分到不同的list中，后端数据：["single":[],"multiple":[]]
  for (const key in res.data) {
    if (Object.hasOwnProperty.call(res.data, key)) {
      const element = res.data[key];
      element.forEach(item => {
        item.type = key
      });
      getList(key).value = element
    }
  }
}
const removeExamQuestion=async (examQuestion) => {
  //确认框
  ElMessageBox.confirm('确定删除该试题吗?', '确认删除', {
    app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  }).then(async () => {
    const res = await removeExamQuestionApi(examQuestion)
    if (res.data) {
      //删除列表中的数据
      const index = getList(examQuestion.questionType).value.findIndex(item => item.questionId === examQuestion.questionId)
      if (index !== -1) {
        getList(examQuestion.questionType).value.splice(index, 1)
      }
      ElMessage({
        message: '试题删除成功',
        type: 'success'
      })
    }
  }).catch(() => {
  })
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f5f7fa; /* 添加浅色背景 */
}

.choose-bank {
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff; /* 白色背景 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.col-class {
  height: 100%;
}

.choose-question-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.score-content {
  height: 20%;
  margin-bottom: 16px;
}

.question-option {
  width: 100%;
  height: calc(80% - 16px);
  margin-top: 16px;
  overflow-y: auto;
}

.score-col {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: auto;
}

.question-option-left,
.question-option-right {
  width: calc(50% - 5px);
  height: 100%;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff; /* 白色背景 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  overflow-y: auto;
}

.question-option-left {
  margin-right: 10px;
}

.question-option-right {
  margin-left: 10px;
}

.score-item {
  border: none;
  height: 100%;
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  background-color: #fff; /* 白色背景 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 柔和阴影效果 */
  transition: transform 0.3s ease; /* 添加悬停动画 */
}

.score-item:hover {
  transform: translateY(-4px);
}

.score-box {
  width: 100%;
  display: grid;
  height: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 16px;
}

.bank-card {
  border: 1px solid #409eff;
  margin: 8px;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  background: linear-gradient(135deg, #ecf5ff, #ffffff); /* 渐变背景 */
  transition: transform 0.3s ease; /* 添加悬停动画 */
}

.bank-card:hover {
  transform: scale(1.02);
}

.bank-question-card {
  border: 1px solid #409eff;
  margin: 8px;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  background: linear-gradient(135deg, #ecf5ff, #ffffff); /* 渐变背景 */
  transition: transform 0.3s ease; /* 添加悬停动画 */
}

.bank-question-card:hover {
  transform: scale(1.01);
}

.bank-question__id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.question-titles {
  font-weight: bold;
  font-size: 16px;
  color: #409eff;
  margin-bottom: 8px;
}

.bank-question__id__item {
  display: flex;
  align-items: center;
}

.el-button {
  color: #409eff;
  font-size: 14px;
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.el-button:hover {
  color: #66b1ff;
}

/* 单个卡片样式 */
.label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.score {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.current-score {
  color: #ff6f61; /* 当前分数颜色 */
}

.separator {
  margin: 0 4px;
  color: #999;
}

.total-score {
  color: #666; /* 总分颜色 */
}
</style>